<template>
	<view class="home">
		<view class="boxitem">
			<image @click="rainfallFn" class="_img" src="../../static/yuliang.jpg" mode=""></image>
			<view class="text">雨量计</view>
		</view>
		<view class="boxitem">
			<image class="_img" src="../../static/shexiangt.jpg" mode=""></image>
			<view class="text">摄像头</view>
		</view>
		<view class="boxitem">
			<image @click="mapFn"  class="_img" src="../../static/map.png" mode=""></image>
			<view class="text">地图</view>
		</view>
		<view class="boxitem">
			<image class="_img" src="../../static/weikaif.jpg" mode=""></image>
			<view class="text">未开放</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			rainfallFn(){
				uni.navigateTo({
					url: '/pages/home/rainfall'
				});
			},
			mapFn(){
				console.log('--------');
				uni.navigateTo({
					url: '/pages/map/index'
				});
			}
		},
	}
</script>

<style scoped lang="scss">
	.home {
		display: flex;
		justify-content: space-around;
		padding: 30rpx;
		.boxitem {
			text-align: center;
			._img {
				width: 200rpx;
				height: 200rpx;
				border-radius: 30rpx;
			}
			.text {
				padding: 10rpx 0;
				font-size: 40rpx;
				color: #666;
			}
			// background-color: #666;
		}
	}
</style>
<style>
	page{
		background-color: #eeeeee;
	}
</style>